<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .tipPane {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      line-height: 100px;
      width: 380px;
      text-align: center;
      background-color: #868e96;
      border: 1px solid #8e7f7f;
      opacity: 0.8;
      font-size: 30px;
      color: #dee2e6;
      font-family: "Microsoft YaHei", Verdana, Geneva, Tahoma, sans-serif;
      /* font-family: ; */
      border-radius: 14px;
      z-index: 1500;
      font-weight: 500;
    }


    .tipPane_err {
      background-color: #f5c0c0;
      opacity: 0.8;
      color: #ec4646;
      border: 1px solid #ec4646;
    }


    /* 70% */
    @media(max-width:1960px) {
      .tipPane {
        font-size: 26px;
        width: 370px;
        line-height: 90px;
      }

    }

    /* 80% */
    @media(max-width:1789px) {
      .tipPane {
        font-size: 22px;
        width: 330px;

        line-height: 80px;
      }
    }

    /* 90% */
    @media(max-width:1549px) {
      .tipPane {
        font-size: 18px;
        width: 280px;
        line-height: 70px;
      }

    }

    /* 100% */
    @media(max-width:1280px) {
      .tipPane {
        font-size: 16px;
        width: 240px;
        line-height: 60px;
      }
    }
  </style>
</head>


<body>
   <!-- 提示信息弹框 -->
   <div class="tipPane tipPane_err" id="tipPane">
  </div>

  <script>
    function displayTipPane_err(text) {
      document.getElementById('tipPane').innerHTML=text;
      document.getElementById('tipPane').style="display:block"
      setTimeout(() => {
        document.getElementById('tipPane').style="display:none"
      }, 1300)
    }
   
    let timer = setInterval(() => {
      displayTipPane_err('错误！！！')
    }, 2300)

  </script>
</body>

</html>